<template>
  <div class="uLogin">
    <u-head :title="tit"></u-head>
    <div class="box">
      <div class="main">
        <img class="logo" src="../assets/images/logo.png" alt="" />
        <div>
          <van-cell-group>
            <van-field
              v-model="tel"
              label="手机号"
              placeholder="请输入手机号"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field v-model="name" label="昵称" placeholder="请输入昵称">
            </van-field>
          </van-cell-group>
          <van-button @click="goRegister" class="login" type="default"
            >注册</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue";
import http from "../utils/http";
export default {
  components: {
    uHead,
  },
  data() {
    return {
      tit: "用户注册",
      tel: "",
      password: "",
      name: "",
    };
  },
  methods: {
    goRegister() {
         http.post("/api/register",
        {phone:this.tel,
        nickname:this.name,
        password:this.password}).then(res=>{
            console.log(res);
            if(res.code==200){
                alert("恭喜你，注册成功！")
                this.tel=''
                this.password=''
                this.name=''
                this.$router.replace("/login")
            }else{
                alert(res.msg)
            }
        })
    },
  },
};
</script>
<style scoped>
.uLogin {
  max-width: 7.5rem;
  min-width: 3.2rem;
}
.box {
  height: 13.6rem;
  background: #ccc;
  text-align: center;
  padding-top: 0.2rem;
}
.main {
  display: inline-block;
  height: 13.4rem;
  width: 7.1rem;
  background: #fff;
  overflow: hidden;
}
.logo {
  margin-top: 4.88rem;
  margin-bottom: 0.88rem;
  width: 3.64rem;
  height: 0.96rem;
}
.login {
  width: 6.1rem;
  height: 0.98rem;
  background: #ccc;
}
.input2 {
  width: 7.5rem;
}
</style>